<template>
  <PageWrapper title="免费软件控制">
    <a-card>
      <div class="ant-basic-table">
        <a-table
          class="ant-table-striped"
          :columns="columns"
          :data-source="dataSource"
          bordered
          :row-selection="rowSelection"
          :pagination="false"
          rowKey="softwareId"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a-popconfirm
                v-if="dataSource.length"
                title="确定删除"
                @confirm="onDelete(record.softwareId)"
              >
                <a>删除</a>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
        <a-row justify="space-between" class="mt-4">
          <a-col>
            <a-pagination
              v-model:current="pageNo"
              :total="totalPage"
              @change="changePage"
            /> </a-col
          ><a-col>
            <a-space class="btn-group">
              <a-button dange @click="onPause">暂停</a-button>
              <a-button type="primary" @click="onLine">上线</a-button
              ><a-button @click="onRevoke">撤回</a-button>
            </a-space></a-col
          ></a-row
        >
      </div></a-card
    >
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page'
  import { Modal, message } from 'ant-design-vue'
  import { ref, onMounted } from 'vue'
  import { freeList, deleteRows, pause, revoke, online } from '/@/api/sys/free'
  const token = localStorage.getItem('TOKEN_KEY')
  //当前页码
  const pageNo = ref(1)
  // 总页码
  const totalPage = ref(0)
  const selectedRowKeys = ref([])
  const selectedRows = ref<DataType[]>([])
  interface DataType {
    // key: string
    // name: string
    // age: number
    idea: string
  }
  const rowSelection = {
    columnTitle: '选择',
    type: 'radio',
    columnWidth: 80,
    fixed: true,
    preserveSelectedRowKeys: true,
    onChange: (keys, rows: DataType[]) => {
      selectedRowKeys.value = keys
      selectedRows.value = rows
      console.log(selectedRowKeys.value[0], selectedRows.value[0].idea)
    },
  }

  const columns = ref([
    {
      title: '序号',
      dataIndex: 'serialNo',
      key: 'serialNo',
    },
    {
      title: '上线日期',
      dataIndex: 'onlineDate',
      key: 'onlineDate',
    },
    {
      title: '软件名称',
      dataIndex: 'softwareName',
      key: 'softwareName',
    },
    {
      title: '点击数',
      dataIndex: 'clickCount',
      key: 'clickCount',
    },

    {
      title: '日最高点击量',
      dataIndex: 'clickCountDay',
      key: 'clickCountDay',
    },
    {
      title: '打印数',
      dataIndex: 'printCount',
      key: 'printCount',
    },
    {
      title: '当前状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      dataIndex: 'operation',
    },
  ])
  const dataSource = ref([])
  function changePage() {
    getTable()
  }
  const getTable = async () => {
    const res = await freeList({
      token,
      pageNo: pageNo.value,
    })
    totalPage.value = res.data.totalPage
    dataSource.value = res.data.items
  }
  // 页面加载时自动执行
  onMounted(() => {
    getTable()
  })
  const onDelete = async (key: string) => {
    const res = await deleteRows({
      token,
      data: { ids: [key] },
    })
    if (res.success === 1) {
      message.success('成功')
      getTable()
    } else {
      message.error(res.message)
    }
  }
  const onPause = async () => {
    if (!selectedRows.value || selectedRows.value.length === 0) {
      message.warning('请先选择一项数据')
      return
    }
    const res = await pause({
      token,
      data: { ids: [selectedRowKeys.value[0]] },
    })
    if (res.success === 1) {
      message.success('成功')
      getTable()
    } else {
      message.error(res.message)
    }
  }
  const onLine = async () => {
    if (!selectedRows.value || selectedRows.value.length === 0) {
      message.warning('请先选择一项数据')
      return
    }
    const res = await online({
      token,
      data: { ids: [selectedRowKeys.value[0]] },
    })
    if (res.success === 1) {
      message.success('成功')
      getTable()
    } else {
      message.error(res.message)
    }
  }
  const onRevoke = async () => {
    if (!selectedRows.value || selectedRows.value.length === 0) {
      message.warning('请先选择一项数据')
      return
    }
    const res = await revoke({
      token,
      data: { ids: [selectedRowKeys.value[0]] },
    })
    if (res.success === 1) {
      message.success('成功')
      getTable()
    } else {
      message.error(res.message)
    }
  }
</script>
<style scoped lang="less">
  .btn-group {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
</style>
